<template>
	<view>
		<view class="title">{{$t(`宝宝信息`)}}</view>
		<!-- 第一步 -->
		<view class="First-step">
			<view class="step" v-for="(item,index) in BabySex" :key="index">
				<view class="img" :class="item.sex == sex? 'img-border' : ''" @click="ChareSex(index)">
					<image v-if="item.sex == sex" class="Select" src="/static/images/Select.png" mode=""></image>
					<image :src="item.sex == sex? item.sexImgActive : item.sexImg" mode=""></image>
				</view>
				<view class="sex" :style="{color:item.sex == sex? '#2A2A2A' : '#7E7E7E'}">{{item.sex}}</view>
			</view>
		</view>
		<TimePick  @change="changeLog" type="date">
			<view class="identity">
				<view class="id-title">{{$t(`出生日期`)}}</view>
				<view class="id-input">
					<input v-model="CurrentTime" type="text" disabled="true" placeholder-class="pl" :placeholder="$t(`请选择宝宝的出生日期`)" :disabled="true"/>
					<image src="/static/images/baby-view.png" mode=""></image>
				</view>
			</view>
		</TimePick>
		<view class="identity">
			<view class="id-title">{{$t(`姓名`)}}</view>
			<view class="id-input">
				<input type="text" placeholder-class="pl" v-model="name" :placeholder="$t(`请输入宝宝姓名`)"/>
			</view>
		</view>
		<view class="identity">
			<view class="id-title">{{$t(`宝宝头像`)}}</view>
			<view class="upload">
				<view class='pictrue' v-for="(item,index) in images" :key="index"
					:data-index="index" @click="getPhotoClickIdx">
					<image :src='item'></image>
					<text class='iconfont icon-guanbi1' @click.stop='DelPic(index)'></text>
				</view>
				<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic'
					v-if="images.length == 0">
					<text class='iconfont icon-icon25201'></text>
					<view>{{$t(`上传图片`)}}</view>
				</view>
			</view>
		</view>
		<view class="Submit" @click="babyAdd()">{{$t(`确定`)}}</view>
	</view>
</template>

<script>
	import TimePick from './uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
	import { BabyModify } from '@/api/baby.js';
	export default {
		components:{
			TimePick
		},
		data() {
			return {
				requestStatus:false,
				sex:'',
				images: [],
				CurrentTime:'',
				TimeStap:'',
				name:'',
				images: [],
				CurrentTime:'',
				BabySex:[{
					id:1,
					sex:'男孩',
					sexImg:require('@/static/images/Boy.png'),
					sexImgActive:require('@/static/images/Boy_Active.png'),
				},{
					id:2,
					sex:'女孩',
					sexImg:require('@/static/images/Girl.png'),
					sexImgActive:require('@/static/images/Girl_Active.png')
				}]
			}
		},
		methods: {
			// 添加宝宝信息
			babyAdd:function(){
				let that = this;
				if (!that.sex) return that.$util.Tips({
					title: that.$t(`请选择宝宝性别`)
				});
				if (!that.CurrentTime) return that.$util.Tips({
					title: that.$t(`请选择宝宝出生日期`)
				});
				if (!that.name) return that.$util.Tips({
					title: that.$t(`请输入宝宝姓名`)
				});
				// 模拟按钮点击后会执行 api 请求，耗时 1 秒
				// 请求完成前 按钮点击将不会继续执行此函数
				if (that.requestStatus) {
					// 利用 return 终止函数继续运行
					return false;
				}
				BabyModify({
					sex:that.sex[0] == '男'? 0 : 1,
					birthday:that.timeStamp(that.CurrentTime),
					real_name:that.name,
					avatar:that.images[0]? that.images[0] : ''
				}).then(res => {
					that.$util.Tips(
						{
							title: that.$t(`添加成功`)
						},
						{
							tab: 3
						}
					);
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
				// 执行函数
				that.requestStatus = true;
				setTimeout(() => {
					// 模拟执行完毕
					// 改变 requestStatus
					that.requestStatus = false;
				}, 1000);
				
			},
			changeLog(e) {
				this.CurrentTime = e;
			},
			/**
			 * 时间格式转换为时间戳
			 * 
			 */
			timeStamp:function(time){
				var date = new Date(time); // 将字符串转换为Date对象  
				var timestamp = date.getTime(); // 获取时间戳  
				return timestamp/1000
			},
			/**
			 * 删除图片
			 * 
			 */
			DelPic: function(index) {
				let that = this,
					pic = this.images[index];
				that.images.splice(index, 1);
				that.$set(that, 'images', that.images);
			},
			// 图片预览
			// 获得相册 idx
			getPhotoClickIdx(e) {
				let _this = this;
				let idx = e.currentTarget.dataset.index;
				_this.imgPreview(_this.images, idx);
			},
			// 图片预览
			imgPreview: function(list, idx) {
				// list：图片 url 数组
				if (list && list.length > 0) {
					uni.previewImage({
						current: list[idx], //  传 Number H5端出现不兼容 
						urls: list
					});
				}
			},
			/**
			 * 上传文件
			 * 
			 */
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne('upload/image', (res) => {
					this.images.push(res.data.url);
					that.$set(that, 'images', that.images);
				});
			
			},
			//选择宝宝性别
			ChareSex(index){
				this.sex = this.BabySex[index].sex 
			}
		}
	}
</script>

<style lang="scss">
.uni-calendar-item__weeks-box{
	.uni-calendar-item--checked{
		background-color: #FF8FB9 !important;
	}
} 	
.uni-datetime-picker--btn{
	background: #FF8FB9 !important;
}	
.Submit{
	margin: 68rpx auto 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 410rpx;
	height: 112rpx;
	border-radius: 64rpx;
	background: #FF8FB9;
	color: #FFFFFF;
	font-size: 42rpx;
	font-weight: bold;
}	
.identity{
	margin: 36rpx 48rpx;
	display: flex;
	flex-direction: column;
	.acea-row,
	.upload {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		.row-column {
			-webkit-box-orient: vertical;
			-moz-box-orient: vertical;
			-o-box-orient: vertical;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
		}
		.row-center-wrapper {
			-webkit-box-align: center;
			-moz-box-align: center;
			-o-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-moz-box-pack: center;
			-o-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
		}
		.pictrue {
			width: 130rpx;
			height: 130rpx;
			margin: 0 22rpx 0 0;
			position: relative;
			font-size: 11px;
			color: #bbb;
		
			&:nth-child(4n) {
				margin-right: 0;
			}
		
			&:nth-last-child(1) {
				border: 0.5px solid #ddd;
				box-sizing: border-box;
				background: #F8F8F8;
				border-radius: 16rpx;
			}
		
		
			uni-image,
			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
		
				img {
					-webkit-touch-callout: none;
					-webkit-user-select: none;
					-moz-user-select: none;
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					width: 100%;
					height: 100%;
				}
			}
		
			.icon-guanbi1 {
				font-size: 33rpx;
				position: absolute;
				top: -10px;
				right: -10px;
			}
		}
	}
	.id-input{
		width: 100%;
		height: 108rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		input{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.pl{
			color: #B4B4B4;
		}
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.id-title{
		padding: 0 0 14rpx 12rpx;
		color: #7E7E7E;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
	}
}
.First-step{
	margin: 76rpx 182rpx 96rpx 182rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.step{
		display: flex;
		flex-direction: column;
		align-items: center;
		.sex{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
		}
		.img-border{
			border: 2rpx solid #FF8FB9;
		}
		.img{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			width: 128rpx;
			height: 128rpx;
			margin: 0 0 16rpx 0;
			.Select{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				bottom: -10rpx;
				right: -10rpx;
			}
			image{
				width: 124rpx;
				height: 124rpx;
			}
		}
	}
}	
.title{
	margin: 42rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 36rpx;
	color: #1A1A1A;
}	
page{
	background: #FFFFFF;
}
</style>
